<breadcrumb></breadcrumb>

<section>
  <h2>Button elements</h2>
  <p>Click on the buttons to increase the button counter.</p>
  <p>Current number of clicks: {{counter}}</p>
  <button mat-button (click)="increase()">Check</button>
  <button mat-raised-button (click)="increase()">Pitch</button>
  <button mat-fab (click)="increase()"
          aria-label="Activate floating action style button to increase the button counter">
    <mat-icon>plus_one</mat-icon>
  </button>
  <button mat-mini-fab (click)="increase()"
          aria-label="Mini floating action button to increase the button counter by 1">
    <mat-icon>plus_one</mat-icon>
  </button>
  <button mat-icon-button (click)="increase()"
          aria-label="Icon button to increase the button counter by 1">
    <mat-icon>plus_one</mat-icon>
  </button>
</section>

<section>
  <h2>Anchor elements</h2>
  <a href="http://www.google.com" mat-button color="primary">Google search</a>
  <a href="https://www.youtube.com/" mat-raised-button>YouTube</a>
  <a href="http://www.google.com" mat-fab
     aria-label="Activate floating action style google search link">
    <mat-icon>search</mat-icon>
  </a>
  <a href="http://www.google.com" mat-mini-fab
     aria-label="Activate mini floating action style google search link">
    <mat-icon>search</mat-icon>
  </a>
  <a href="http://www.google.com" mat-icon-button
     aria-label="Activate icon style google search link">
    <mat-icon>search</mat-icon>
  </a>
</section>

<section>
  <h2>Buttons in different colors</h2>
  <button mat-button color="primary"
          (click)="openSnackBar('Color is primary.')">Primary</button>
  <button mat-button color="accent" (click)="openSnackBar('Color is accent.')">Accent</button>
  <button mat-button color="warn" (click)="openSnackBar('Color is warn.')">Warn</button>
</section>

<section>
  <h2>Disabled button</h2>
  <p>The following "cancel" button is disabled</p>
  <button mat-button [disabled]="true">Cancel</button>
</section>
